<template>
  <div class="container">
    <el-carousel :interval="5*1000" arrow="always">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3> {{item}}</h3>
        <img :src="require('@/assets/m_logo.png')" style="width:100%;height:100%;max-width:100%;max-height:100%;">
      </el-carousel-item>
    </el-carousel>
    <br>
    <div class="b_list" v-for="index in 10" :key="index">
      a
    </div>
    <div style="float:left;text-align:center;width:99%;margin-top:10px;">
      <el-pagination  @current-change="handleCurrentChange" layout="prev, pager, next" background :total="100"></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    handleCurrentChange (val) {
      console.log(val)
    }
  }
}
</script>

<style scoped>

  .el-carousel__item h3 {
    color: #FFF;
    width: 100%;
    height: 10%;
    position:absolute;
    left: 50px;
    top: 20px;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
.b_list{
  border: 0.5px solid #ddd;
  /* margin: 1px; */
  width: 33.1%;
  height: 160px;
  float: left;
  text-align: center;
  animation: firstload 1s;
  cursor: pointer;
}
.b_list:nth-of-type(2n){
  background: #eee;
  opacity: 0.2;
}
.b_list:nth-of-type(2n+1){
  background: #fff;
}
.b_list:nth-of-type(2n):hover{
  background: #fff;
}
.b_list:nth-of-type(2n+1):hover{
  background: rgb(241, 241, 241);
}
.container{
  width: 65%;
  margin: 0 auto;
  margin-top: 80px;
}
@keyframes firstload
{
  from {height: 80px;;}
  to {height: 150px;}
}
</style>
